<template>
	<fu-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true" :border-radius="24">
		<view class="padding xs_bj">
			<view class="flex justify-between padding-bottom">
				<view class="flex-sub text-center xs_title">
					<text class="xs_circle opacity50"></text>
					<text class="xs_circle"></text>
					<text class="xs_text">{{i18n['优惠']}}</text>
					<text class="xs_circle"></text>
					<text class="xs_circle opacity50"></text>
				</view>
				<view class="close-box" @tap="close"><text class="cuIcon-close"></text></view>
			</view>
			<scroll-view class="container" scroll-y>
				<!-- <text>可领取优惠券</text> -->
				<block v-for="(item, index) in list" :key="index">
					<view class="item">
						<view class="left">
							<view class="left-price">
								<view class="left-price-num">
									<text class="text-price"></text>
									<text class="price text-bold">{{ item.money | filterPrice }}</text>
								</view>
								<view class="left-price-tit">{{i18n['全场通用']}}</view>
							</view>
							<view class="left-container">
								<view class="left-content">
									<view class="text-bold text-lg text-333">{{i18n['满']}}{{ item.min_order_money |
										filterPrice }}{{i18n['可用']}}</view>
									<view class="text-666 text-sm">{{i18n['有效期至：']}}{{ item.end_time | filterDate }}</view>
									<view class="text-999 text-sm" @click="switchType(item)">{{i18n['详细信息']}}<text
											class="margin-left-xs text-xs"
											:class="[item.fold ? 'cuIcon-fold' : 'cuIcon-unfold']"></text></view>
								</view>
								<view class="desc text-xs text-999" v-show="item.fold">
									<view class="li">{{i18n['· 不能和其他优惠券叠加使用']}}</view>
									<view class="li">{{i18n['· 所有新品上架都能使用']}}</view>
								</view>
							</view>
						</view>
						<view class="right">
							<view class="btn" :class="item.is_receive === 1 ? 'get-after' : 'get-before'" @tap.stop="receive(item, index, item.is_receive)"
								>{{ item.is_receive === 1 ? i18n['已领取'] : i18n['立即领取'] }}</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</fu-popup>
</template>

<script>
	export default {
		props: {
			info: {
				type: Array,
				default() {
					return [];
				}
			}
		},
		data() {
			return {
				show: false,
				curTab: 0
			};
		},
		computed: {
			list(val) {
				let _list = this.info.map(item => {
					return {
						...item,
						fold: false,
					}
				})
				return _list;
			}
		},
		watch: {},
		filters: {
			filterPrice(val) {
				return parseFloat(val);
			},
      filterDate(val){
        console.log(val)
        return val.split(" ")[0];

      }
		},
		methods: {
			// 切换展示状态
			switchType(item) {
				item.fold = !item.fold;
				this.$forceUpdate()
			},
			//领取优惠券
			receive(item, index, is_receive) {
				// 前端判断已领取得点击失效
				if (is_receive == 1) {
					return false;
				}
				console.log(11111);
				this.$api
					.post(global.apiUrls.postReceiveCoupon, {
						cid: item.id
					})
					.then(res => {
						console.log(res.data);
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						if (res.data.code == 1) {
							// this.info[index].is_receive = 1;
							this.$emit('changeInfo', index);
						}
					});
			},
			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.xs_bj {
		background: #f7f7f7;
	}

	.xs_center {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		// height: 170upx;
	}

	.xs_price {
		font-size: 48upx;
		font-weight: bold;
		color: #ffffff;
	}

	.text-price::before {
		font-size: 12px;
	}

	.xs_full {
		font-size: 24upx;
		color: #ffffff;
	}

	.xs_text {}

	.xs_time {}

	.xs_btn {
		background: #ff6464 !important;
		border-radius: 10rpx !important;
	}

	.xs_bl {
		border-left: 1px dotted #f12228 !important;
	}

	.xs_b {
		background: #fff !important;
		border: none !important;
	}

	.xs_back {
		background: #ff6464 !important;
		border-radius: 2px !important;
	}

	.is_receive {
		background: #ececec !important;
		border-radius: 2px !important;

		.xs_price,
		.xs_full {
			color: #999;
		}
	}

	.container {
		height: 600rpx;
	}

	.text-999 {
		color: #999999;
	}

	.height-150 {
		height: 150rpx;
	}

	.text-price {
		/* color: red; */
		line-height: 1;
		text-align: center;
	}

	.card-action {
		justify-content: center;
		width: 130rpx;
		display: flex;
		align-items: center;
		/* flex: 1; */
		height: 100%;
		padding-left: 5rpx;
		padding-right: 5rpx;

		.action-btn {
			height: 60rpx;
			width: 110rpx;
			padding: 0;
			/* border-radius: 20rpx; */
			font-size: 24rpx;
			text-align: center;
			line-height: 60rpx;
			color: #ffffff;
			background: #fd100b;
		}
	}

	.get-after {
		background: #BFBFBF !important;
	}

	.get-before {
		background: #FF6464;
	}

	.border {
		border: 1rpx solid #fbefc7;
		background: #fbefc7;
	}

	.xs_title {
		font-size: 36upx;
		font-weight: bold;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: center;

		.xs_text {
			padding: 0 18upx;
		}

		.xs_circle {
			width: 10upx;
			height: 10upx;
			background: #fa2033;
			border-radius: 50%;
			margin: 0 6upx;
		}

		.opacity50 {
			opacity: 0.5;
		}
	}

	.text-cut {
		width: 360rpx;
	}

	.text-price.xs_price {
		word-break: break-all;
	}


	.item {
		background-color: #FFFFFF;
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: flex-start;

		.left {
			flex: 1;
			display: flex;
			border-right: 1rpx dashed #CCCCCC;

			.left-price {
				width: 182rpx;
				height: 220rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.left-price-num {
					color: #FF6636;

					.text-price {
						font-size: 24rpx;
					}

					.price {
						font-size: 56rpx;
						font-weight: bold;
					}
				}

				.left-price-tit {
					font-size: 24rpx;
					font-weight: bold;
					color: #333333;
				}
			}

			.left-container {
				flex: 1;

				.left-content {
					height: 220rpx;
					padding: 36rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-right:12rpx;
				}

				.desc {
					transform: translateY(-36rpx);

					.li {
						margin-top: 10rpx;
					}
				}
			}
		}

		.right {
			width: 186rpx;
			height: 220rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				width: 136rpx;
				height: 56rpx;
				border-radius: 56rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 56rpx;
			}
		}
	}

	.active {
		background-color: #FF6464;
	}

	.disabled {
		background-color: #BFBFBF;
	}
</style>
